<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="father">
        <div class="top">
            <div class="color"></div>
            <div class="one active">1</div>
            <div class="one">2</div>
            <div class="one">3</div>
            <div class="one">4</div>
            <div class="one">5</div>
            <div class="one">6</div>
            <div class="one">7</div>
        </div>
        <div class="bottom">
            <div>
                <button class="btn" disabled>前一张</button>
            </div>
            <div>
                <button class="next">后一张</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
<!-- <script>
    var color = document.querySelector('.color');  //获取线条
    var btn1 = document.querySelector('.btn'); //获取前一张按钮
    var next = document.querySelector('.next'); //获取下一张按钮
    var one = document.querySelectorAll('.one'); //获取圆圈
    // console.log(btn1)

    let sum = 1;
    btn1.onclick = function () {
        sum--;
        // console.log(sum);
        updata();
    }
    next.onclick = function () {
        sum++;
        // console.log(sum);
        updata();
    }
    function updata() {
        for (var i = 0; i < one.length; i++) {
            if (i < sum) {
                one[i].classList.add('active');
                console.log(one[i]);
            } else {
                one[i].classList.remove('active');
            }
        }
        color.style.width = (sum - 1) / (one.length - 1) * 100 + "%";
    }
</script> -->

</html>